<template>
  <div class="app-container">
    <el-form ref="listFilterRef" :model="list.filter" inline>
      <el-form-item prop="name">
        <el-input v-model="list.filter.name" placeholder="商品名称" clearable />
      </el-form-item>
      <el-form-item prop="belongMchId">
        <merchantSelect
          v-model="list.filter.belongMchId"
          noPermission
          placeholder="所属商户名称"
        />
      </el-form-item>
      <el-form-item prop="subMchId">
        <SubMchSelect
          v-model="list.filter.subMchId"
          placeholder="上架店铺名称"
        />
      </el-form-item>
      <el-form-item prop="recommend">
        <KiSelect
          v-model="list.filter.recommend"
          :options="[
            { dataName: '是', dataValue: '1' },
            { dataName: '否', dataValue: '0' }
          ]"
          placeholder="是否热门推荐"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <span></span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column align="center" type="index" />
      <el-table-column label="商品编码" prop="productId" />
      <el-table-column label="商品类型" prop="categoryName" />
      <el-table-column label="商品名称" prop="productName" />
      <el-table-column label="售价" prop="currentPrice">
        <template slot-scope="{ row }">
          {{ row.currentPrice | $cent2yuan }}元
        </template>
      </el-table-column>
      <el-table-column label="所属商户名称" prop="belongMchName" />
      <el-table-column label="是否热门推荐" prop="recommend">
        <template slot-scope="{ row }">
          <span>{{ row.recommend ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分销奖励金" prop="distributionProportion">
        <template
          slot-scope="{ row }"
          v-if="row.distributionProportion !== null"
        >
          {{ row.distributionProportion }}%
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="{ row }">
          <span>{{ row.status ? '上架' : '下架' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品状态" prop="productStatus">
        <template slot-scope="{ row }">
          <span>{{ row.productStatus ? '启用' : '停用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上架的店铺" prop="subMchName" />
      <el-table-column label="云仓授权状态">
        <template slot-scope="{ row }">
          <el-tag type="danger" v-if="row.authCloudWarehouse ==0">未授权</el-tag>
          <el-tag type="success" v-if="row.authCloudWarehouse ==1">已授权</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="{ row }">
          <AuthButton
            @click="
              () => {
                commodityDetail.id = row.productId
                commodityDetail.businessTypeId = row.businessTypeId
                commodityDetail.show = true
              }
            "
            name="查看"
          />
          <AuthButton
            @click="changStatus(row, '0')"
            v-if="row.status == '1'"
            circle
            name="下架"
          />
          <AuthButton
            @click="changStatus(row, '1')"
            v-if="row.status == '0'"
            circle
            name="上架"
          />
          <AuthButton @click="purchase(row)" name="编辑" />
          <AuthButton @click="d(row)" name="删除" />
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="showDialog"
      title="编辑"
      v-model="purchaseMap"
      :submit="submit"
      ref="formRef"
    >
      <template #el-form>
        <el-form-item label="商品名称">
          {{ purchaseMap.productName__ }}
        </el-form-item>
        <el-form-item label="商品价格">
          {{ purchaseMap.currentPrice__ | $cent2yuan }}元
        </el-form-item>
        <el-form-item label="分销奖励金">
          {{ purchaseMap.distributionProportion__ }}%
          <form-item-tip value="销售商品并完成订单后获得分销奖励金" />
        </el-form-item>
        <el-form-item label="选择要上架的店铺" prop="subMchId" verify>
          <KiSelect
            v-model="purchaseMap.subMchId"
            @change="subMchChange"
            :options="merchantList"
            :props="{ value: 'subMchId', label: 'name' }"
          />
          <form-item-tip value="选择本商户的一个店铺进行销售" />
        </el-form-item>
        <el-form-item label="客服提供方" prop="customerType" verify>
          <KiSelect
            v-model="purchaseMap.customerType"
            :options="[
              { dataName: '商品所属商户', dataValue: 0 },
              { dataName: '商品销售方', dataValue: 1 }
            ]"
          />
          <form-item-tip value="选择商品所属方或商品销售方" />
        </el-form-item>
        <el-form-item label="热门推荐" prop="recommend" verify>
          <el-switch
            v-model="purchaseMap.recommend"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
          <form-item-tip value="开启后在我的店铺中成为热门推荐的商品" />
        </el-form-item>
      </template>
    </KiFormDialog>

    <CommodityDetail
      v-if="commodityDetail.show"
      :show.sync="commodityDetail.show"
      :id.sync="commodityDetail.id"
      :businessTypeId.sync="commodityDetail.businessTypeId"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import SubMchSelect from '@/components/SubMchSelect'
import merchantSelect from '@/components/merchantSelect'
import CommodityDetail from '@/views/merchant/commodity/form/CommodityDetail.vue'

export default {
  mixins: [pageMixin],
  computed: {
    ...mapGetters(['userInfo'])
  },
  components: {
    SubMchSelect,
    merchantSelect,
    CommodityDetail
  },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: '/sot-admin-api/product/product-procure',
      axiosConfig: {
        d: {
          url: 'deletePurchaseProduct'
        }
      }
    }),
  data () {
    return {
      showDialog: false,
      purchaseMap: {
        mchId: '',
        productId: '',
        customerMchId: '',
        recommend: 1,
        subMchId: '',
        status: 1
      },
      merchantList: [],
      waiter: [],
      showAuthorize: false,
      rowProduct: '',
      commodityDetail: {
        show: false,
        id: undefined,
        businessTypeId: undefined
      }
    }
  },
  created () {
    // 获取子商铺
    this.$POST('sot-admin-api/merchant/sub/queryListForMch', {
      merchantId: this.userInfo.merchantId,
      status: '1'
    }).then(res => {
      this.merchantList = res.data || []
    })
  },
  methods: {
    subMchChange (e) {
      this.merchantList.forEach(item => {
        if (item.subMchId == e) {
          this.waiter.length = 2
          this.waiter[1] = {
            subMchId: item.subMchId,
            name: item.name
          }
        }
      })
      this.purchaseMap.customerMchId = ''
    },
    // 编辑
    purchase (row, status = false) {
      this.purchaseMap = {
        mchId: row.mchId,
        productId: row.productId,
        // customerMchId: row.customerMchId,
        customerType: row.customerType,
        recommend: row.recommend,
        subMchId: row.subMchId,
        status: status || row.status,
        productName__: row.productName,
        currentPrice__: row.currentPrice,
        distributionProportion__: row.distributionProportion
      }

      this.mergeWaiter(row)
      this.showDialog = true
      this.$forceUpdate()
    },
    // 合并客服提供方
    mergeWaiter (row) {
      this.waiter = [
        {
          subMchId: row.belongSubMchId,
          name: row.belongSubMchName
        }
      ]

      this.merchantList.forEach(item => {
        if (item.subMchId == row.subMchId) {
          this.waiter.push(item)
        }
      })
    },
    submit () {
      this.$POST(
        'sot-admin-api/product/product-procure/editProcureProduct',
        this.purchaseMap
      ).then(res => {
        if (res.errorCode == '00000') {
          this.$swal.success('操作成功！')
          this.getList()
          this.showDialog = false
        } else {
          this.$swal.error(res.message)
        }
      })
    },
    // 下架
    changStatus (row, status) {
      this.$confirm(`确定${status == '0' ? '下架' : '上架'}此产品？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$POST(
          'sot-admin-api/product/product-procure/changeProductStatus',
          {
            id: row.id,
            status
          }
        ).then(res => {
          if (res.errorCode == '00000') {
            this.$swal.success(`${status == '0' ? '下架' : '上架'}成功`)
            this.getList()
          } else {
            this.$swal.error(res.message)
          }
        })
      })
    }
  }
}
</script>
